<template>
    <div class="box" v-loading="loading">
        <div class="title">
            题库管理
        </div>
        <div class="top">
            <div class="top-content">
                <div>
                    <button @click="dialogFormVisible = true">增加题库+</button>
                    <button @click="delIsChecked()">批量删除-</button>    
                </div>
              
            </div>
        </div>
        <div class="content">
            <el-table  :data="allTopicLibrary" :row-selection="true" @selection-change="allCheckd" scrollbar-always-on="true" border style="width: 100%" max-height="600px" type="index" :row-style="{height:'58px'}">
                <el-table-column   width="55" label="全选"  fixed="left" type="selection">
                </el-table-column>
                <el-table-column prop='topicLibraryId' label="题库序号" width="140" fixed="left" align="center"/>
                <el-table-column prop="topicLibraryImg" label="题库图片" align="center" width="120" :show-overflow-tooltip="true">
                    <template #default="scope">
                        <div style="align-items: center">
                            <el-image :preview-src-list="scope.row.topicLibraryImg" :src="scope.row.topicLibraryImg" preview-teleported style="height:100px"/>
                        </div> 
                    </template>
                </el-table-column>
                <el-table-column prop="topicLibraryName" label="题库名称" width="500" :show-overflow-tooltip="true" align="center"/>       
                <el-table-column prop="topicDescribe" label="题库描述" width="600" align="center" :class-name="levelTextColor" :show-overflow-tooltip="true">
                </el-table-column>
            
                <el-table-column prop="TopicLibraryType" label="题库类型" width="260" align="center" :show-overflow-tooltip="true"/>
                <el-table-column  label="操作" fixed="right" width="400" align="center">
                    <template #default="scope">
                        <button class="delBtn" @click="delTopic(scope.$index)">删除</button>
                        <button class="editBtn" @click="dialogUpdate(scope.$index)">修改</button>
                    </template>
                </el-table-column>           
            </el-table>
            <div class="topic-item" v-for="(item,index) in allTopicLibrary" :key="index">
                <ul v-show="item.tip == 0">
                    <li class="topic-library-id">
                        <input type="checkbox" name="" id="" v-model="item.isChecked" >    
                    </li>
                    <li class="topic-id">{{item.topicLibraryId}}</li>
                    <li class="topic-content">{{item.topicLibraryName}}</li>
                    <li  class="topic_writer" :style="item.levelTextColor">{{item.topicDescribe}}</li>
                    <li class="topic-cue">
                        <el-image
                            style="width: 100px; height: 100px"
                            :src="item.topicLibraryImg"
                            :fit="fit"></el-image>
                    </li>
                    <li class="Btns">
                        <button class="delBtn" @click="delTopic(index)">删除</button>
                        <button class="editBtn" @click="dialogUpdate(index)">修改</button>
                    </li>
                </ul>
            </div>
        </div>
        <el-dialog title="添加题库内容" v-model="dialogFormVisible" lock-scroll :close-on-click-modal="false"  show-close="true" destroy-on-close="false">
             <!-- 图片上传 -->
             
            <div style="padding-bottom:10px;box-sizing: border-box;">
                <img v-if="up==1" :src="dialogImageUrl" style="width: 45%;border: 1px solid #ccc;float: left;border-radius: 10px;"/>
                <div style="width: 3%;height: 100%;float: left;">&nbsp; 封面图片</div>
                <el-upload 
                action="#"
                list-type="picture-card" 
                :auto-upload="false" 
                :limit="2" 
                :on-change="changeFile"
                accept=".jpg, .jpeg, .png, .gif"
                ref="upload"
                :show-file-list="true"
                >
                    <i class="iconfont icon-jiahao"/>
                    <template #file="{ file }">
                    <div>
                        <img v-if="up==0" class="el-upload-list__item-thumbnail" :src="file.url" />
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="iconfont icon-sousuo"/>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="iconfont icon-shanchu2"/>
                            </span>
                        </span>
                    </div>
                    </template>
                </el-upload>
                <el-dialog v-model="dialogVisible" top="1%" class="showImg">
                    <img :src="dialogImageUrl" alt="Preview Image" style="width:100%;height: 100%;"/>
                </el-dialog>
            </div>
            <div style="padding-bottom:10px;box-sizing: border-box;">
                <img v-if="up==1" :src="dialogImageUrl" style="width: 45%;border: 1px solid #ccc;float: left;border-radius: 10px;"/>
                <div style="width: 3%;height: 100%;float: left;">&nbsp; 轮播图片</div>
                <el-upload 
                action="#"
                list-type="picture-card" 
                :auto-upload="false" 
                :limit="2" 
                :on-change="changeFile1"
                accept=".jpg, .jpeg, .png, .gif"
                ref="upload"
                :show-file-list="true"
                >
                    <i class="iconfont icon-jiahao"/>
                    <template #file="{ file }">
                    <div>
                        <img v-if="up==0" class="el-upload-list__item-thumbnail" :src="file.url" />
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <i class="iconfont icon-sousuo"/>
                            </span>
                            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="iconfont icon-shanchu2"/>
                            </span>
                        </span>
                    </div>
                    </template>
                </el-upload>
                <el-dialog v-model="dialogVisible" top="1%" class="showImg">
                    <img :src="dialogImageUrl" alt="Preview Image" style="width:100%;height: 100%;"/>
                </el-dialog>
            </div>
            <el-form ref="forms">
                <el-form-item label="题库名" :label-width="formLabelWidth" width="100px">
                    <el-input v-model="TopicLibrary.topicLibraryName" autocomplete="off" class="el-input"></el-input>
                </el-form-item>
                <el-form-item label="题库类型" :label-width="formLabelWidth" width="100px">
                    <el-input v-model="TopicLibrary.topicLibraryType" maxlength="10" autocomplete="off" class="el-input" ></el-input>
                </el-form-item>
                <el-form-item label="题库描述" :label-width="formLabelWidth">
                        <el-input
                        type="textarea"
                        resize="none"
                        placeholder="请输入内容"
                        class="el-input"
                        maxlength="100"
                        show-word-limit
                        v-model="TopicLibrary.topicDescribe">
                        </el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="emptyForm()" >确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改题库内容" v-model="dialogUpdatemVisible"  :close-on-click-modal="false" lock-scroll show-close="false">
            <el-form >
                <el-form-item label="题库名" :label-width="formLabelWidth">
                    <el-input
                    type="textarea"
                    class="el-input"
                    maxlengt=100px
                    resize="none"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    v-model="topicListChange.topicLibraryName">
                    </el-input>
                </el-form-item>
                <el-form-item label="题库类型" :label-width="formLabelWidth" width="100px">
                    <el-input v-model="topicListChange.topicLibraryType" autocomplete="off" class="el-input"></el-input>
                </el-form-item>
                <el-form-item label="题库描述" :label-width="formLabelWidth">
                    <el-input
                    type="textarea"
                    class="el-input"
                    maxlengt=100px
                    resize="none"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入内容"
                    v-model="topicListChange.topicDescribe">
                    </el-input>
                </el-form-item>  
                <el-form-item label="题库封面路径" :label-width="formLabelWidth" width="100px">
                    <el-input v-model="topicListChange.topicLibraryImg" autocomplete="off" class="el-input"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer">
                <el-button @click="dialogUpdatemVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogUpdated()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
<!-- Form -->
    
</template>

<script>
import {topicLibrary,addtopicLibrary,topicLibraryType} from '../../api/secondary_api/topicLibrary';
import {getImgUrl} from '@/api/secondary_api/imgUpLoad'
export default {
    name:'PageRiderManage',
     data() {
        return{
            id:0,
            Visiable:false,
            dialogImageUrl: '',//
            checkIsChecked:false,
            allCheckeds:false,
            loading:true,
            num:2,   
            pageNum:1,
            pageSize:10,
            pageTotals:0,
            searchTitle:'',
            imgUrl: '',//
            bannerImgUrl: '',//
            searchAnswer:'',
            searchContent:{
             "topicLibraryId": "",
                "chooseTitle": "",
                "chooseLevel":"",
                "chooseAnswer": "",
                "pageSize":'10',
                "pageNum":1

            },
            levelTextColor:"",
            allTopicLibrary:[],
            allTopicLibraryType:[],
              textarea2: '',
              textarea3: '',
             dialogUpdatemVisible: false,
             dialogFormVisible: false,
             formLabelWidth: '100px',
            TopicLibrary:{
                "topicLibraryId": 0,
                "topicLibraryName": "",
                "topicLibraryBanner": "",
                "topicDescribe": "",
                "topicLibraryMinTitle":'',
                "topicLibraryImg": "",
                "topicLibraryType":"",
                "tip":0
                },
            topicListChange:null,
            searchResultList:null,
            TopicLibrary1:`
               {
                "topicLibraryId": 0,
                "topicLibraryName": "",
                "topicLibraryBanner": "",
                "topicDescribe": "",
                "topicLibraryMinTitle":"",
                "topicLibraryImg": "",
                "topicLibraryType":"",
                "tip":0
                }
                `
          }
    },
    methods: {
        openSuccess() {//成功信息弹窗
            this.$message({
                message: '添加数据成功！！！',
                type: 'success'
            });
         },
        openError(response) {//错误信息弹窗
           this.$message.error(response.msg);
         },
         changeFile(file){
            this.up=0
            if (file.size / 1024 / 1024 > 1) {
                this.$message.error('上传头像图片大小不能超过 1MB!');
                this.$refs['upload'].clearFiles()
            }
            this.imgUrl = file.raw;
            console.log(this.imgUrl,"图片路径");
        },
        changeFile1(file){
            this.up=0
            if (file.size / 1024 / 1024 > 1) {
                this.$message.error('上传头像图片大小不能超过 1MB!');
                this.$refs['upload'].clearFiles()
            }
            this.bannerImgUrl = file.raw;
            console.log(this.bannerImgUrl,"图片路径");
        },
         handleRemove(){
            this.$refs['upload'].clearFiles()
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogFormVisible = true;
        },
        addTopic(){//增加题库
            this.pageTotals = this.pageTotals+1;
            getImgUrl(this.imgUrl).then(
                response=>{
                    this.TopicLibrary.topicLibraryImg = response.data;
                   getImgUrl(this.bannerImgUrl).then(
                        response=>{
                            this.TopicLibrary.topicLibraryBanner = response.data;
                            addtopicLibrary(this.TopicLibrary).then(
                                response=>{
                                    if (response.code == 202) {
                                        this.openError(response);
                                    }else{
                                       this.changePage(this.pageNum);
                                       this.openSuccess();
                                    }
                
                                }
                            ); 
                        }
                    );  
                }
            );
              
            console.log(this.topicLibrary,"sssssssssssss")
             
        },
        delTopic(index){ //删除题目    
            this.allTopicLibrary[index].tip = 1;
            addtopicLibrary(this.allTopicLibrary[index]).then(
                response=>{
                    console.log(response)
                }
            );
            this.allTopicLibrary.splice(index,1);
        },
        dialogUpdate(i){//修改获取数据
            this.dialogUpdatemVisible=true;
            this.topicListChange = this.allTopicLibrary[i];
        },
         dialogUpdated(){//修改后发送数据  
            this.dialogUpdatemVisible = false;
            addtopicLibrary(this.topicListChange).then(
                response=>{
                    console.log(response);
                }
            );
        },
       emptyForm(){//清空添加内容
            this.addTopic();
            
            this.dialogFormVisible = false;  
            this.topicLibrary = JSON.parse(this.TopicLibrary1);
            this.$refs.forms.resetFields();
            // this.num = 2    ;
        },
      } ,  
        mounted(){
           topicLibrary().then(
                response=>{ 
                    console.log(response);
                     if (this.allTopicLibrary.tip == 1) {
                        this.isShow = false;
                    } else {
                        this.isShow = true;
                    }
                    this.allTopicLibrary = response.data;
                    this.loading = false
                    topicLibraryType(this.allTopicLibrary.topicLibraryType).then(
                        response=>{
                            console.log(response,111111111111111);
                            this.allTopicLibraryType = response.data;
                            for (let index = 0; index < this.allTopicLibraryType.length; index++) {  
                                this.allTopicLibrary[index]['TopicLibraryType'] = this.allTopicLibraryType[index].topicLibraryTypeName;
                                console.log("33333333333")
                            }
                           
                        }
                    );
                    console.log( this.allTopicLibrary);
                }
            )
        }
    }

    
</script>

<style scoped>
    .box{
        width: 100%;
        /* height: calc(100vh - 151px); */
        font-style: 40px;
        overflow: hidden;
    }
    .title{
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        font-weight: bold;
        text-indent: 2em;
        border-bottom: 1px solid #Ccc;
    }
    .top{
        width: 100%;
        /* height: 35px;
        line-height: 35px; */
        padding: 0 2%;
        overflow: hidden;
        margin-top: 10px;
    }
    .top-content{
        width: 96%;
        height: 35px;
        margin-top: 10px;
        overflow: hidden;
    }
     .top-content>div{
        float: right;
     }
     .top-content>div>button{
         width: 130px;
         height: 35px;
         line-height: 35px;
         color: #fff;
         margin-left: 10px;
         border-radius: 5px;
        border: 1px solid #fff;
     }
     button:hover{
         opacity: 0.5;
     }
      .top-content>div>button:nth-of-type(1){
          background-color: #00ffff;
     }
     .top-content>div>button:nth-of-type(2){
           background-color: red;
     }
     .search{
         width: 100%;
         padding: 0 2%;
         overflow: hidden;
     }
     .search-content{
         width: 96%;
         overflow: hidden;
         margin-top: 10px;
          border: 1px solid #ccc;
     }
     .search-left{
         width: 90%;
         float: left;
     }
    .search-right{
         width: 10%;
         float: left;
     }
     .search-left>.el-input{
         width: 20%;
     }
     .search-right>button{
         width: 100%;
         height: 32px;
         overflow: hidden;
         background-color: #00ffff;
         float: right;
        border: 1px solid #fff;
        border-radius: 5px;
     }
    .content{
        height: 500px;
        margin-top: 5px;
        padding: 0 2%;
        position: relative;
    }
   
    .topic-top{
        width: 100%;
        overflow: hidden;
    }
     .topic-library-id{
        width: 10%;
    }
    .topic-item{
        width: 100%;
        overflow: hidden;
    }
    .topic-top>ul>li{
        list-style: none;
        width: 16.5%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: aliceblue;
        font-size: 15px;
        float: left;
        color: #000;    
        border: 1px solid #ccc; 
    }
     .topic-top>ul>li:nth-of-type(1){
         text-align: center;
         width: 10%;
     }
      .topic-item>ul>li:nth-of-type(1){
          text-align: center;
         width: 10%;
      }
     .topic-top>ul>li:nth-of-type(2){
        text-align: center;
         width: 10%;
     }
    .topic-item>ul>li:nth-of-type(2){
           text-align: center;
         width: 10%;
      }
    .topic-top>ul>li:nth-of-type(3){    
         width: 28%;
     }
    .topic-item>ul>li:nth-of-type(3){
        font-size: 14px;
         width: 28%;
      }
      .topic-top>ul>li:nth-of-type(4){  
           
         text-align: center;
     }
    .topic-item>ul>li:nth-of-type(4){
          font-size: 15px; 
          text-align: center;
          font-family: "微软雅黑", "隶书",serif;
      }
     .topic-top>ul>li:nth-of-type(5){
          width: 18%;
          font-size: 14px;
      }
    .topic-item>ul>li:nth-of-type(5){
          width: 18%;
          font-size: 14px;
      }
    .topic-top>ul>li:nth-of-type(6){
         text-align: center;
      }
    .topic-item>ul>li:nth-of-type(6){
            text-align: center;
      }
    .topic-item>ul{
           overflow: hidden;
           height: 100%;
       }
    .topic-item>ul>li{
        list-style: none;
        width: 16.5%;
        height: 61px;
        line-height: 61px;
        font-size: 15px;
        float: left;
        text-overflow:  ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #333;
        border: 1px solid #ccc; 
    }
     .topic-item:nth-of-type(odd)>ul>li{
         background-color: #eee;
     }
    .delBtn{
        background-color: red;
        color: #fff;
    }
     .editBtn{
        background-color: #0079f3;
        color: #fff;
    }
    .delBtn,.editBtn{
        width: 65px;
        height: 30px;
        line-height: 30px;
        border: 0px;
        border-radius: 5px;
        margin-left: 10px;
        border: 1px solid #fff;
    }
    .dialog-footer{
        margin-left:42%;
    }
    .addButton{
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 20px;
        background-color: #fff;
        position: absolute;
        right: 0;
    }
    .delButton{
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 20px;
        background-color: #fff;
        position: absolute;
        right: 30px;
    }
    .el-input{
        width: 50%; 
    }
    .el-input__count{
        height: 10%;
    }
    .bottom{
        position: absolute;
        left: 45%;
        bottom: 40px;
    }
</style>